<template>
    <div>
        <Dialog
                ref="detail"
                dialogCls="mydlgg"
                headerCls="mydlgg-head"
                footerCls="mydlgg-foot"
                :dialogStyle="{ width: '700px' }"
                :modal="true"
                borderType="thin"
        >
            <div slot="header">
                <span class="headerIcon newlyAdded"></span>
                <span class="titleStyle">请假详情</span>
            </div>
            <div class="insidePadding">
                <!-- 这个div必须保留 -->
                <div class="fleft">
                    <Label align="right">请假单号</Label>
                    <TextBox
                            class="unifiedWid"
                            v-model="bill.orderNo"
                            :readonly="true"
                    ></TextBox>
                </div>
                <div class="fleft">
                    <Label align="right">请假类型</Label>
                    <TextBox
                            class="unifiedWid"
                            v-model="bill.leaveTypeName"
                            :readonly="true"
                    ></TextBox>
                </div>
                <div class="fleft">
                    <Label align="right">开始日期</Label>
                    <TextBox
                            class="unifiedWid"
                            v-model="bill.startDate"
                            :readonly="true"
                    ></TextBox>
                </div>
                <div class="fleft">
                    <Label align="right">结束日期</Label>
                    <TextBox
                            class="unifiedWid"
                            v-model="bill.endDate"
                            :readonly="true"
                    ></TextBox>
                </div>

                <!-- 表格容器   -->
                <div style="height: 300px">
                    <bd-grid
                            style="width: 100%;height: 100%"
                            ref="gridList"
                            :classId="classId"
                            :dataUrl="dataUrl"
                            :httpMethod="'httpMethod'"
                            :enableGridCheck="false"
                    ></bd-grid>
                </div>
            </div>
        </Dialog>
    </div>
</template>

<script>
    import BdGrid from "@/components/gridNoPage";
    import leave from "../../api/leave/leave";

    export default {

        components: {
            BdGrid
        },
        props: {
            dataUrl: {
                type: String,
                default: 'api/sys/columns'
            },
            httpMethod: {
                type: String,
                default: 'GET'
            },
            classId: {
                type: Number,
                default: 0
            },
            orderId: {
                type: Number,
                default: 0
            }
        },
        data () {
            return {
                rowData: [],
                bill: {
                    orderNo: '',
                    startDate: '',
                    endDate: '',
                    leaveTypeName: ''
                }
            }
        },
        mounted() {
            this.$refs.detail.close();
        },
        methods: {
            open() {
                this.$refs.detail.open();
            },
            close() {
                this.$refs.detail.close();
            },
            /**
             * 获取请假单详情
             * @param orderId   订单ID
             * @returns {Promise<void>}
             */
            async getLeaveData(orderId) {
                let res = await leave.getLeaveOrderById({ orderId: orderId});
                if (res && res.result) {
                    let data = res.result;
                    this.bill.orderNo = data.leaveOrder.orderNo;
                    this.bill.startDate = data.leaveOrder.startDate;
                    this.bill.endDate = data.leaveOrder.endDate;
                    this.bill.leaveTypeName = data.leaveOrder.leaveTypeName;

                    this.$refs.gridList.loadList(data.detailList);
                }
            }
        }
    }
</script>

<style scoped>

</style>
